<template>
    <div class="page">

        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">我的收益</h1>
            <div class="header-btnRight"></div>
        </div>

        <div class="income">
            <div class="income-head">
                <div class="income-head-list">
                    <div class="income-head-title">可提现金额（元）</div>
                    <div class="income-head-price">¥ {{member_money}}</div>
                </div>
                <div class="income-head-list">
                    <div class="income-head-title">预计收益金额（元）</div>
                    <div class="income-head-price">¥ {{expect_money}}</div>
                </div>
            </div>
        </div>
        <div class="list">
            <router-link to="./my-income-total?expect=true" class="list-item" >
                <div  class="list-item-title">预计收益</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <router-link to="./my-income-total" class="list-item" >
                <div  class="list-item-title">累计收益</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <router-link to="./my-income-record" class="list-item" >
                <div  class="list-item-title">提现记录</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
        </div>
        <div class="h30"></div>
        <div class="incomeAdd" v-if="member_real==0">
            <router-link to="./my-income-auth"  class="incomeAdd-btn" >
                <span>完善账户信息可提现</span>
            </router-link>
            <div class="incomeAdd-desc">为保证账户安全，请填写账户信息后提现</div>
        </div>
        <div class="incomeAdd" v-else>
            <router-link to="./my-income-request"  class="incomeAdd-btn" >
                <span>立即提现</span>
            </router-link>
            <div class="incomeAdd-desc">提现金额满￥100可提现</div>
            <router-link  :to="{path:'/my-income-auth',query:{real_id:member_real.real_id}}"  class="incomeAdd-editInfo">修改资料</router-link>
        </div>

    </div>
</template>

<script>
    import wxShare from "../store/wxShare"
    export default {
        name: "My-income",
        data(){
            return{
                member_money:0,
                expect_money:0,
                member_real:0,
            }
        },
        methods:{
            getData() {
                let _that = this;
                _that.axios.post('profit')
                    .then(res => {
                        _that.expect_money=res.data.expect_money;
                        _that.member_money=res.data.member_money;
                        _that.member_real=res.data.member_real;

                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的收益', debug: false}, function () {
                    console.log('分享成功')
                });
            }

        },
        mounted(){
            this.getData();
            this.share();
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30{height: rpx(30);}
    .h160{height: rpx(160);}
    .page{
        background: $bgcolor1;
        min-height: 100%;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .income{
        border-bottom: solid 1px $color2;
        background: $color0;
        &-head{
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: url(../assets/income_bg.jpg) no-repeat 100%  100%;
            width: rpx(750);
            height: rpx(480);
            &-list{
                padding: rpx(40);
                border-right: rpx(3) solid #fff;
            }
            &-list:last-child {
                border-right: none;
            }
            &-title{
                padding-bottom: rpx(60);
                font-size: rpx(26);
                color: $color0;
                text-align: center;
            }
            &-price{
                font-size: rpx(60);
                color: $color0;
                text-align: center;
            }
        }
    }

    //成为会员

    .incomeAdd{
        padding: rpx(100) rpx(30) rpx(30);
        &-btn{
            display: block;
            height: rpx(80);
            line-height: rpx(80);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
        &-desc{
            padding-top:rpx(30) ;
            font-size: rpx(26);
            text-align: center;
            color: $color5;
        }
        &-editInfo{
            display: block;
            padding:rpx(30) ;
            font-size: rpx(26);
            text-align: center;
            color: $color3;
            cursor: pointer;
        }
    }


    //项列表
    .list{
        background: $color0;
        &-item{
            display: flex;
            align-items: center;
            padding:rpx(35) rpx(30);
            border-bottom: solid 1px $color2;
            &-title{
                flex: 1;
                font-size: rpx(34);
            }
            &-arr{
                width: rpx(32);
                height: rpx(32);
            }
        }
    }


</style>